﻿<UserControl x:Name="quickActionBar" x:Class="Conqueror.WP.View.QuickAction"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:telerikPrimitives="clr-namespace:Telerik.Windows.Controls;assembly=Telerik.Windows.Controls.Primitives"
    mc:Ignorable="d"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    Height="66" Width="66"
    Tap="OnTapExpandContract">
	<UserControl.Resources>
		<Storyboard x:Name="openQuickAction">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="quickActionBar">
				<EasingDoubleKeyFrame KeyTime="0" Value="66"/>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="456">
					<EasingDoubleKeyFrame.EasingFunction>
						<CircleEase EasingMode="EaseOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
        <Storyboard x:Name="closeQuickAction">
			<DoubleAnimationUsingKeyFrames Storyboard.TargetProperty="(FrameworkElement.Width)" Storyboard.TargetName="quickActionBar">
				<EasingDoubleKeyFrame KeyTime="0" Value="456">
					<EasingDoubleKeyFrame.EasingFunction>
						<CircleEase EasingMode="EaseOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
				<EasingDoubleKeyFrame KeyTime="0:0:0.5" Value="66">
					<EasingDoubleKeyFrame.EasingFunction>
						<CircleEase EasingMode="EaseOut"/>
					</EasingDoubleKeyFrame.EasingFunction>
				</EasingDoubleKeyFrame>
			</DoubleAnimationUsingKeyFrames>
		</Storyboard>
	</UserControl.Resources>
    
    <Grid x:Name="LayoutRoot" Background="{StaticResource PhoneChromeBrush}">
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="66"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="66"/>
            <ColumnDefinition Width="12"/>
            <ColumnDefinition Width="66"/>
        </Grid.ColumnDefinitions>
        
        <TextBlock Text="{Binding Name}" Foreground="{StaticResource PhoneForegroundBrush}"
                   Grid.Column="1" VerticalAlignment="Center" Margin="12,0,0,0" FontSize="{StaticResource PhoneFontSizeMedium}"/>

        <telerikPrimitives:RadImageButton RestStateImageSource="/Image/Icons/appbar.edit.png" ButtonShape="Rectangle"
                                          Grid.Column="2" Margin="-12" Width="90" Height="90"/>

        <telerikPrimitives:RadImageButton RestStateImageSource="/Image/Icons/appbar.chevron.right.png" ButtonShape="Rectangle"
                                          Grid.Column="4" Margin="-12" Width="90" Height="90"/>

        <Border Background="{Binding Background}">
            <Border Background="White">
                <Border.OpacityMask>
                    <ImageBrush ImageSource="{Binding Image}"/>
                </Border.OpacityMask>
            </Border>
        </Border>
    </Grid>
</UserControl>